<script setup lang="ts">
import { ref } from 'vue'
import vSlideIn from '@/directive/slideIn'

const lists = ref(new Array(10))
const colors = [
  '#14a018',
  '#d52727',
  '#73db1e',
  '#c12186',
  '#5921c1',
  '#991717',
  '#d08310',
  '#5cb29e',
  '#420d77'
]
</script>

<template>
  <main class="container">
    <div
      class="chunk"
      v-slide-in
      v-for="(_, index) in lists"
      :style="{ backgroundColor: colors[index] }"
    >
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora magnam aut sapiente maxime
      sequi fugit iste, asperiores quis quisquam! Eaque fuga cupiditate dolores harum tempore eos
      eius minima. Iste, eligendi.
    </div>
  </main>
</template>

<style scoped>
.container {
  padding: 50px 20px;
  width: 80vw;
  margin: 0 auto;
}

.chunk {
  --h: 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: var(--h);
  border-radius: 8px;
  margin-bottom: 20px;
  color: #fff;
}
</style>
